<template>
    <div class="login-container">
        <h2 class="login-title">Base Admin登陆</h2>
        <a-form ref="form" :model="form" class="login-form">
            <<!--h2 class="title">用户登录 LOGIN</h2>-->
            <a-form-item>
                <a-input class="inputBox" v-model="form.username">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-input-password class="inputBox" v-model="form.password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input-password>
            </a-form-item>

            <a-form-item>
                <a-button class="submit" type="primary" @click="onSubmit">登录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    username: "admin",
                    password: "admin"
                }
            }
        },
        methods: {
            //登录请求
            onSubmit()  {
                this.axios.post(process.env.VUE_APP_API_URL + this.urls.login, this.form).then((data) => {
                    //错误提示
                    /*if(data.data.code !== 200){
                        this.$message.error(data.data.msg);
                        return;
                    }*/
                    //console.log(data.data.data.token, 'token........');
                    //设置localStorage
                    localStorage.setItem('base_admin_token', data.data.data.token)
                    //登录成功则跳转
                    this.$router.push('/');
                });
            },
        },
    }
</script>
<style>
    /*顶级容器*/
    .login-container{
        width: 100%;
        height: 100%;
        background: url("../assets/loginBg.png");
        position: absolute;
    }
    .login-form {
        width: 565px;
        height: 372px;
        margin: 0 auto;
        padding: 40px 110px;
    }

    /* Log */
    .login-title {
        color: #fff;
        text-align: center;
        margin: 150px 0;
        font-size: 48px;
        font-family: Microsoft Yahei;
    }
    /* 登陆按钮 */
    .submit{
        width: 100%;
        height: 40px;
        font-size: 16px;
    }
    /* 用户登陆标题 */
    .title{
        margin-bottom: 50px;
        color: #fff;
        font-weight: 700;
        font-size: 24px;
        font-family: Microsoft Yahei;
    }
</style>